<template>
  <div class="box">
    <my_header></my_header>
    <hr>
    <el-row>
      <el-col
        style="height: 50px;font-size: 30px;text-align: left"
        :span="24">xxx地区
      </el-col>
      <hr>
    </el-row>
    <el-row class="box">
      <el-col :span="12">
        <div id="yuQing_map_detail" :style="{width: '100%', height: '500px'}"></div>
      </el-col>

      <el-col :span="12">
        <table class="seven_data_table">
          <tr>
            <th>序号</th>
            <th>标题</th>
            <th>属性</th>
            <th>来源</th>
            <th>发表时间</th>
          </tr>
          <tr v-for="(i,key) in 11">
            <td>{{key}}</td>
            <td>
              <router-link to="/today_yuqing_detail/1">标题标题标题标题</router-link>
            </td>
            <td>i</td>
            <td>i</td>
            <td>i</td>
          </tr>

        </table>
        <el-pagination
          layout="prev, pager, next"
          :total="50">
        </el-pagination>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="date"
            label="日期"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址">
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import my_header from "../../components/my_header";

export default {
  name: "yuQing_map_detail",
  components: {
    my_header
  },
  data() {
    return {
      legend_demo: ['a', 'b', 'c'],
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]

    }
  },
  mounted() {
    this.init_today_data_source()
  },
  created() {
    // this.getData()
    console.log("yuQing_map_detail-created")
  },
  methods: {
    async init_today_data_source() {

      // let xArray=[]
      // let yArray=[]
      // for (let i = 0; i <this.today_data_source_data.length; i++) {
      //   xArray.push(this.today_data_source_data[i].loc)
      //   yArray.push(this.today_data_source_data[i].num)
      // }
      // console.log("x",xArray,"y",yArray)

      // console.log("today_data_source---========>",this.today_data_source_data)
      let dom = document.getElementById('yuQing_map_detail')
      let myChart = this.echarts.init(dom)
      // 绘制图表
      myChart.setOption({
        title: {
          // text: '今日数据来源(top5)',
          // 文字格式
          textStyle: {
            //文字颜色
            color: '#ccc',
            //字体风格,'normal','italic','oblique'
            fontStyle: 'normal',
            //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
            fontWeight: 'bold',
            //字体系列
            fontFamily: 'sans-serif',
            //字体大小
            fontSize: 18
          }
        },

        toolbox: {
          show: true,
        },
        legend: {
          orient: 'vertical',
          x: 'right',      //可设定图例在左、右、居中
          y: 'center',     //可设定图例在上、下、居中
          data: this.legend_demo
        },
        xAxis: {
          // data: xArray,
          data: ["a", "b", "c"],

          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            },
            interval: 0,
            rotate: 40,
          }

        },
        yAxis: {
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            }
          }
        },
        series: [{
          // name: this.legend_demo,
          name: "访问来源",
          type: 'bar',
          // data:  yArray,
          // data:  ["10","20","30"],
          data: [{
            value: 10,
            name:'a'
          },
            {
              value: 20,
              name:'b'
            },
            {
              value: 10,
              name:'c'
            }],
          barWidth: 80,//柱图宽度
          itemStyle: {
            normal: {
              color: function (params) {
                //首先定义一个数组
                let colorList = [
                  '#EB744D', '#5082FB', '#6ABA68'
                ];
                return colorList[params.dataIndex]
              },
              //以下为是否显示
              label: {
                show: true
              }
            }
          },
        }]
      });
    }
  }
}
</script>
<style>
* {
  background-color: #415c80;
  color: #ccd8e0;
  /*border: 1px solid;*/
}

tr, td {
  height: 30px;
  border: 1px solid;

}

td {
  white-space: nowrap;
  min-width: 100px;
}

.box {
  width: 1500px;
  /*height: 700px;*/
}


</style>
